<template>
  <Pie :data="chartData" :options="chartOptions" />
</template>

<script setup lang="ts">
import { Pie } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement
} from 'chart.js'
import { Statistic } from '@/model/HomeModels';

ChartJS.register(Title, Tooltip, Legend, ArcElement)

const props = defineProps({
  category: {
    type: Object as () => Statistic,
    required: true, // 设置为必填项，确保组件接收到数据
  }
});

const chartData = {
  labels: props.category.labels,
  datasets: [
    {
      label: props.category.label,
      data: props.category.data,
      backgroundColor: [
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(201, 203, 207, 0.6)',
        'rgba(100, 255, 165, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 102, 255, 0.6)'
      ],
      borderWidth: 1
    }
  ]
}

const chartOptions = {
  responsive: true,
  plugins: {
    legend: { position: 'top' as const },
    title: { 
      display: true, 
      text: props.category.label // 使用传入的label作为标题
    }
  }
}
</script>

